<template>
  <view class="report-box">
    <view class="header-common header-report">
      <view class="header" :style="{ paddingTop: useAppData.titleHeight + 3 + 'px' }">
        <view class="back-box" @tap="gotoBack">
          <image class="back-img" src="../../static/icon-back.png"></image>
        </view>
        <span>运动报告</span>
      </view>
    </view>
    <view class="report-con" :style="{'margin-top': useAppData.titleHeight + 30 + 'px'}">
      <view class="con-txt">
      本报告基于生命健康大模型，通过收集你的运动健康数据，智能分析你的健康情况，预测你的健康风险，进行专业解读。你可以根据此健康管理方案指导，进行运动方案调整。请前往“我的—个人资料”里，更新你的身高、体重信息，此报告将同步进行“BMI及运动健康变化情况”数据更新。
      </view>
      <view class="con-tab">
        <view :class="{'tab-disabled': index === 3, 'tab-active': state.tabActive === index}" v-for="(item, index) in state.tabList" :key="index" @tap="handleTimeTab(item)">
          {{item.name}}
        </view>
      </view>
      <view class="time-box">
        <view class="time-arrow time-arrow-left" @tap="handlePreDate('subtract')">
          <image src="../static/icon-time-left.png"></image>
        </view>
        <view class="time">
          {{state.selectDate}}
        </view>
        <view class="time-arrow time-arrow-right" @tap="handlePreDate('add')">
          <image v-if="state.isShowNextIcon" src="../static/icon-time-right.png"></image>
        </view>
      </view>
      <view class="report-item">
        <view class="item-bg"></view>
        <view class="title">
          <text>BMI</text>
          <image class="yuansu-img" src="../static/yuansu.png"></image>
        </view>
        <view class="dial-plate">
					<view class="circle-box">
						<image ref="pointerRef" class="icon-zhizhen" :style="{transform: state.poiterStyle}" src="../static/zhizhen.png"></image>						
						<view :class="['circle', state.circleClass]">
							<view class="circle-num">{{state.reportData?.bmi || "--"}}</view>
							<view>{{state.reportData?.grade || "--"}}</view>
						</view>
					</view>
        </view>
        <view class="dial-num">
          <view class="item-num">
            <view class="item-standard">
              <view class="item-pointer"></view>
              <text>偏低</text>
            </view>
            <view>{{'<'}}18.5</view>
          </view>
          <view class="line"></view>
          <view class="item-num">
            <view class="item-standard">
              <view class="item-pointer item-pointer-2"></view>
              <text>标准</text>
            </view>
            <view>18.5-23.9</view>
          </view>
          <view class="line"></view>
          <view class="item-num">
            <view class="item-standard">
              <view class="item-pointer item-pointer-3"></view>
              <text>超重</text>
            </view>
            <view>24.0-27.9</view>
          </view>
          <view class="line"></view>
          <view class="item-num">
            <view class="item-standard">
              <view class="item-pointer item-pointer-4"></view>
              <text>肥胖</text>
            </view>
            <view>≥28.0</view>
          </view>
        </view>
        <view class="history-box">
          <view class="history-header">
            <view class="header-bg"></view>
            <view class="header-title">
              <text>历史数据对比</text>
              <text>（与{{state.tabActiveItem.diffTxt}}相比）</text>
            </view>
            <view class="dashed-line"></view>
            <view class="data-con">
              <view class="data-item" v-for="(item, index) in state.dataList" :key="index">
                <text>{{item.name}}</text>
                <text>{{item.value}}</text>
                <text>{{item.difference}}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="health-knowledge">
          <view class="knowledge-title">【健康科普】</view>
          <view class="knowledge-con">
            BMI（身体质量指数），是国际上常用的衡量人体胖瘦程度以及是否健康的一个标准。
          </view>
        </view>
      </view>
      <view class="report-item item-sports">
        <view class="item-bg">
          <image class="xingxing-img" src="../static/xingxing.png"></image>
        </view>
        <view class="title">
          <text>运动数据</text>
          <image class="yuansu-img" src="../static/yuansu.png"></image>
        </view>
        <view class="echarts-box" v-if="state.tabActiveItem.unit !== 'day' && state.xAxisData.length > 0">
          <Echarts :xAxisData="state.xAxisData" :seriesData="state.seriesData" :allData="state.allData" :isReflesh="state.isReflesh" :dateType="state.tabActiveItem.unit" @onEchartsTab="getEchartsTab"></Echarts>
        </view>
        <view class="history-box">
          <view class="history-header">
            <view class="header-bg"></view>
            <view class="header-title">
              <text>历史数据对比</text>
              <text>（与{{state.tabActiveItem.diffTxt}}相比）</text>
            </view>
            <view class="dashed-line"></view>
            <view class="data-con">
              <view class="data-item" v-for="(item, index) in state.sportsList" :key="index">
                <text>{{item.name}}</text>
                <text>{{item.value}}</text>
                <text>{{item.difference}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="report-item item-sports" v-if="state.tabActiveItem.unit !== 'day' && state.reportData && state.reportData.advice">
        <view class="item-bg">
          <image class="xingxing-img" src="../static/xingxing.png"></image>
        </view>
        <view class="title">
          <text>结果建议</text>
          <image class="yuansu-img" src="../static/yuansu.png"></image>
        </view>
        <view class="health-advise">
          <view class="advise-con">
            {{state.reportData.advice}}
          </view>
          <!-- <view class="advise-tip">
            为了您的身体健康，建议您再后续的运动中考虑一下几个方面：
          </view>
          <view advise-con>
            1.保持稳定的训练频率：xxxx
            2.增加长距离训练：xxx
            3.休息与恢复:xxxxx
          </view> -->
        </view>
      </view>
      <view class="bottom-tip">该内容由大模型生成，请谨慎识别</view>
    </view>
  </view>
</template>

<script setup>
import {
  onLaunch,
  onShow,
  onHide,
  onUnload,
  onShareAppMessage,
  onShareTimeline,
} from "@dcloudio/uni-app";
import { ref, reactive, onMounted, nextTick, getCurrentInstance } from "vue";
import * as API from "../../api/api";
import Echarts from "../components/echarts"
import { getTime, getAllDatesOfMonth, timeConvert, handleCommonSpeed } from "../../utils/util";
import { storeToRefs } from "pinia";
import { useRunInfoStore } from "../../store/runInfo";
import { useAppStore } from "../../store/app";
import { useShareStore } from "../../store/share";
import * as Pinia from 'pinia';
const useShareData = useShareStore();
const useAppData = useAppStore();
const useRunInfoData = useRunInfoStore();
const { proxy, ctx } = getCurrentInstance()
const { reportType } = storeToRefs(useRunInfoData)
const state = reactive({
  userInfo: null,
  selectDate: proxy.$Moment().subtract(1,"days").format('YYYY年MM月DD日'),
  startDate: null,
  endDate: null,
  xAxisData: [],
  seriesData: [],
  isShowNextIcon: true,
  tabActiveItem: {
    name: "日",
    value: 0,
    unit: "day",
    intervalUnit: "days",
    diffTxt: "上一次"
  },
  tabActive: 0,
  tabList: [
    {
      name: "日",
      value: 0,
      unit: "day",
      intervalUnit: "days",
      diffTxt: "上一次"
    },
    {
      name: "周",
      value: 1,
      unit: "week",
      intervalUnit: "days",
      diffTxt: "上周"
    },
    {
      name: "月",
      value: 2,
      unit: "month",
      intervalUnit: "months",
      diffTxt: "上月"
    },
    {
      name: "年",
      value: 3,
      unit: "year",
      intervalUnit: "year"
    },
  ],
  dataList: [
    {
      name: "身高（cm）",
      value: "--",
      difference: "--",
      key: "height",
      differKey: "heightDiffer"
    },
    {
      name: "体重 (kg)",
      value: "--",
      difference: "--",
      key: "weight",
      differKey: "weightDiffer"
    },
    {
      name: "BMI",
      value: "--",
      difference: "--",
      key: "bmi",
      differKey: "bmiDiffer"
    },
  ],
  sportsList: [
    {
      name: "累计里程 (公里)",
      value: "--",
      difference: "--",
      key: "distance",
      differKey: "distanceDiffer"
    },
    {
      name: "累计时长(小时)",
      value: "--",
      difference: "--",
      key: "duration",
      differKey: "durationDiffer"
    },
    {
      name: "平均配速",
      value: "--",
      difference: "--",
      key: "pace",
      differKey: "paceDiffer"
    },
    {
      name: "运动次数 (次)",
      value: "--",
      difference: "--",
      key: "sportCount",
      differKey: "sportCountDiffer"
    },
  ],
  min: 14,
  max: 33,
  poiterStyle: `translate(-50%, -50%) rotate(2deg)`,
  reportData: null,
  echartsTab: "distanceDatas",
  allData: 0,
  circleClass: "circle-2",
  isReflesh: false
});

const pointerRef = ref(null);


const gotoBack = () => {
  uni.navigateBack();
};

onShareAppMessage((res) => {
  return useShareData.shareInfo;
});

onShareTimeline((res) => {
  return useShareData.shareInfo;
});


const handleGrade = () => {
  let bmi = Number(state.reportData.bmi)
  if (bmi < 18.5) {
    state.reportData.grade = "偏低"
    state.circleClass = "circle-1"
  } else if(18.5 <= bmi  && bmi <= 23.9) {
    state.reportData.grade = "标准"
    state.circleClass = "circle-2"
  } else if(24.0 <= bmi  && bmi <= 27.9) {
    state.reportData.grade = "超重"
    state.circleClass = "circle-3"
  } else if (28.0 <= bmi) {
    state.reportData.grade = "肥胖";
    state.circleClass = "circle-4"
  }
}

const handleInit = () => {
  state.dataList = [{
    name: "身高（cm）",
    value: "--",
    difference: "--",
    key: "height",
    differKey: "heightDiffer"
  },
  {
    name: "体重 (kg)",
    value: "--",
    difference: "--",
    key: "weight",
    differKey: "weightDiffer"
  },
  {
    name: "BMI",
    value: "--",
    difference: "--",
    key: "bmi",
    differKey: "bmiDiffer"
  }]
  state.sportsList = [
    {
      name: "累计里程 (公里)",
      value: "--",
      difference: "--",
      key: "distance",
      differKey: "distanceDiffer"
    },
    {
      name: "累计时长(小时)",
      value: "--",
      difference: "--",
      key: "duration",
      differKey: "durationDiffer"
    },
    {
      name: "平均配速",
      value: "--",
      difference: "--",
      key: "pace",
      differKey: "paceDiffer"
    },
    {
      name: "运动次数 (次)",
      value: "--",
      difference: "--",
      key: "sportCount",
      differKey: "sportCountDiffer"
    },
  ]
}

// bmi历史数据处理
const handleHistoryBmi = () => {
  handleInit()
  if (state.reportData) {
    state.dataList.map(item => {
      item.value = state.reportData[item.key]
      item.difference = state.reportData[item.differKey]
    })
    state.sportsList.map(item => {
      item.value = state.reportData[item.key]
      item.difference = state.reportData[item.differKey]
    })
  }
}

const getEchartsTab = (item) => {
  state.echartsTab = item?.key || "distanceDatas"
  handleSeriesData()
  handleAllData()
}

const handleAllData = () => {
  if (state.reportData) {
    if (state.echartsTab === "distanceDatas") {
      state.allData = state.reportData.distance
    }
    if (state.echartsTab === "durationDatas") {
      state.allData = state.reportData.duration
    }
    if (state.echartsTab === "paceDatas") {
      state.allData = state.reportData.pace
    }
  }
}

const handleSpeed = (pace) => {
  if (pace > 0) {
    let min = (pace/60).toFixed(2)
    let matchSpeedObj = timeConvert(min)
    return `${matchSpeedObj.min}'${matchSpeedObj.sen}"`
  } else {
    return `0'00"`
  }
}

const getSportReport = () => {
  state.isReflesh = true
  state.reportData = null
  state.allData = "--"
  handleInit()
  let params = {
    userId: state.userInfo?.customers?.customerId, 
    startDate: state.startDate, 
    endDate: state.endDate, 
    cycle: state.tabActiveItem.unit
  }
  API.getSportReportData(params).then(res => {
    if (res.code === 0) {
      if (res.data) {
        state.reportData = res.data
        state.reportData.durationDatas.map(item => {
          item.num = item.num ? (Number(item.num)/60/60).toFixed(3) : item.num
        })
        state.reportData.paceDatas.map(item => {
          item.num = item.num ? (Number(item.num)/60).toFixed(2) : item.num
        })
        state.reportData.duration = state.reportData.duration && state.reportData.duration !== "--" ? (state.reportData.duration/60/60).toFixed(2) : state.reportData.duration
        let durationDifferStr = state.reportData.durationDiffer
        if (state.reportData.durationDiffer && state.reportData.durationDiffer !== "--" && state.reportData.durationDiffer !== 0) {
          durationDifferStr = (Number(state.reportData.durationDiffer)/60/60).toFixed(2)
          state.reportData.durationDiffer = Number(state.reportData.durationDiffer) > 0 ? `+${durationDifferStr}` : `${durationDifferStr}` 
        } else {
          state.reportData.durationDiffer = durationDifferStr
        }
        let paceDifferStr = state.reportData.paceDiffer
        if (state.reportData.paceDiffer && state.reportData.paceDiffer !== "--" && state.reportData.paceDiffer !== 0) {
          let positivePace = Math.abs(Number(state.reportData.paceDiffer))
          let pace = handleCommonSpeed(positivePace)
          if (Number(pace.sen) > 0) {
            state.reportData.paceDiffer = Number(state.reportData.paceDiffer) > 0 ? '+' + pace.pace : '-' + pace.pace
          } else {
            state.reportData.paceDiffer = 0
          }
        } else {
          state.reportData.paceDiffer = paceDifferStr
        }
        state.reportData.pace = state.reportData.pace && state.reportData.pace !== "--" ? handleSpeed(state.reportData.pace) : state.reportData.pace
        state.reportData.sportCountDiffer = Number(state.reportData.sportCountDiffer) > 0 ? '+' + state.reportData.sportCountDiffer : state.reportData.sportCountDiffer
        state.reportData.bmiDiffer = Number(state.reportData.bmiDiffer) > 0 ? '+' + state.reportData.bmiDiffer : state.reportData.bmiDiffer
        state.reportData.heightDiffer = Number(state.reportData.heightDiffer) > 0 ? "+" + state.reportData.heightDiffer : state.reportData.heightDiffer
        state.reportData.weightDiffer = Number(state.reportData.weightDiffer) > 0 ? "+" + state.reportData.weightDiffer : state.reportData.weightDiffer
        state.reportData.distanceDiffer = Number(state.reportData.distanceDiffer) > 0 ? "+" + state.reportData.distanceDiffer : state.reportData.distanceDiffer
        handleAllData()
        if (state.reportData) {
          handleCalcAngle()
          handleHistoryBmi()
          handleGrade()
          handleSeriesData()
        }
      } else {
        state.poiterStyle = `translate(-50%, -50%) rotate(2deg)`
        state.circleClass = "circle-2"
      }
      state.isReflesh = false
    } else {
      state.poiterStyle = `translate(-50%, -50%) rotate(2deg)`
      state.circleClass = "circle-2"
      uni.showToast({
        title: res.message || "查询报告失败",
        icon: "none"
      })
    }
  }).catch(err => {
    state.isReflesh = false
    state.poiterStyle = `translate(-50%, -50%) rotate(2deg)`
    state.circleClass = "circle-2"
    uni.showToast({
      title: err || "查询报告失败",
      icon: "none"
    })
  })
}

// 图表数据处理
const handleSeriesData = () => {
  if (state.reportData) {
    state.seriesData.map(item => {
      state.reportData[state.echartsTab].map(it => {
        if (state.tabActiveItem.unit === "week" && item[0] == it.week) {
          item[1] = it.num
        }
        if (state.tabActiveItem.unit === "month" && item[0] == it.date) {
          item[1] = it.num
        }
      })
    })
    console.log(" state.seriesData",  state.seriesData)
  }
}


const handlePreDate = (type) => {
  if (!state.isShowNextIcon && type === "add") return
  let days = 0
  if (state.tabActiveItem.unit === "week") {
    if (type !== "add") {
      days = 5
    } else {
      days = 7
    }
	}
  getMonths()
  getWeekDate(type, days)
}
 
/** 
 * dateUnit: 单位 日days 周week 月month 年year
 * preNext: 下个月add 上月subtract
 * days: 天数 增减的天数
*/
const getWeekDate = (preNext, days=0) => {
  let weekStartDate = proxy.$Moment(state.startDate)
  let weekEndDate = proxy.$Moment(state.startDate)
  if (state.tabActiveItem.unit === "day") {
		state.startDate = weekStartDate.startOf(state.tabActiveItem.intervalUnit)[preNext](1+days, state.tabActiveItem.intervalUnit).format('YYYY-MM-DD');
  	state.endDate = weekEndDate.endOf(state.tabActiveItem.intervalUnit)[preNext](1+days, state.tabActiveItem.intervalUnit).format('YYYY-MM-DD');
    state.selectDate = proxy.$Moment(state.startDate).format('YYYY年MM月DD日')
  }
  if (state.tabActiveItem.unit === "week") {
		state.startDate = weekStartDate.startOf(state.tabActiveItem.unit)[preNext](1+days, state.tabActiveItem.intervalUnit).format('YYYY-MM-DD');
  	state.endDate = weekEndDate.endOf(state.tabActiveItem.unit)[preNext](1+days, state.tabActiveItem.intervalUnit).format('YYYY-MM-DD');
    state.selectDate = proxy.$Moment(state.startDate).format('YYYY年MM月DD日') + '-' + proxy.$Moment(state.endDate).format('YYYY年MM月DD日')
  }
  if (state.tabActiveItem.unit === "month") {
		state.startDate = weekStartDate[preNext](1+days, state.tabActiveItem.intervalUnit).startOf(state.tabActiveItem.unit).format('YYYY-MM-DD');
  	state.endDate = weekEndDate[preNext](1+days, state.tabActiveItem.intervalUnit).endOf(state.tabActiveItem.unit).format('YYYY-MM-DD');
    state.selectDate = proxy.$Moment(state.startDate).format("YYYY年MM月")
  }
  handleNextIcon()
  getSportReport()
}

// 获取月
const getMonths = () => {
  state.xAxisData = []
  state.seriesData = []
  setTimeout(() => {
    if (state.tabActiveItem.unit === "month") {
      let year = proxy.$Moment(state.startDate).format("YYYY")
      let month = proxy.$Moment(state.startDate).month() + 1;
      let dateArr = getAllDatesOfMonth(year, month)
      dateArr.map(item => {
        state.xAxisData.push(proxy.$Moment(item).format("MM/DD"))
        state.seriesData.push([proxy.$Moment(item).format("MM/DD"), 0])
      })
    }
    if (state.tabActiveItem.unit === "week") {
      state.xAxisData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      state.xAxisData.map(item => {
        state.seriesData.push([item, 0])
      })
    }
  }, 10)
}

const handleNextIcon = () => {
	let today = proxy.$Moment()
	let preDate = null
	if (state.tabActiveItem.unit === "day") {
		preDate = today.subtract(2, "days")
	}
	if (state.tabActiveItem.unit === "week") {
		preDate = today.startOf("week")
	}
	if (state.tabActiveItem.unit === "month") {
		preDate = today.startOf("month").subtract(1, "days")
	}
  let endDate = proxy.$Moment(state.endDate)
  state.isShowNextIcon = preDate.isAfter(endDate);
}

const handleTimeTab = (item) => {
  if (item.value === 3) {
    uni.showToast({
      title: "暂无运动报告",
      icon: "none"
    })
    return
  }
  state.tabActive = item.value
  state.tabActiveItem = item
  state.startDate = state.endDate = proxy.$Moment().format('YYYY-MM-DD')
  if (item.value === 1) {
    getWeekDate("subtract", 5)
  } else {
    getWeekDate("subtract", 0)
  }
  handleNextIcon()
  getMonths()
}

const handleCalcAngle = () => {
  if (state.reportData && state.reportData.bmi && state.reportData.bmi !== "--") {
    let itemAngle = 180 / (state.max - state.min)
    // let rotateAngle = state.reportData.bmi < 24 ? -(90 - parseInt(itemAngle * (Math.abs(state.reportData.bmi-state.min)))) : parseInt(itemAngle * Math.abs((state.reportData.bmi-state.min)))
    let rotateAngle = parseInt(itemAngle * Math.abs(state.reportData.bmi-state.min)) - 90
    if (rotateAngle > -48 && rotateAngle < -44) {
      if (state.reportData.bmi < 18.5) {
        rotateAngle = -48
      } 
      if (state.reportData.bmi >= 18.5 && state.reportData.bmi >= 18.9){
        rotateAngle = -44
      }
    }
    if (rotateAngle >= -3 && rotateAngle <= 3) {
      if (state.reportData.bmi < 23.9) {
        rotateAngle = -3
      } 
      if (state.reportData.bmi >= 24 && state.reportData.bmi >= 24.1){
        rotateAngle = 3
      }
    }
    if (rotateAngle >= 43 && rotateAngle <= 47) {
      // if (state.reportData.bmi < 27.9) {
      //   rotateAngle = 43
      // } 
      if (state.reportData.bmi > 27.9 && state.reportData.bmi < 28.8){
        rotateAngle = 47
      }
    }
    if (state.reportData.bmi < 14) {
      rotateAngle = -90
    }
    if (state.reportData.bmi > 33) {
      rotateAngle = 90
    }
    nextTick(() => {
      state.poiterStyle = `translate(-50%, -50%) rotate(${rotateAngle}deg)`
    })
  }
}

const handlePageInit = () => {
  if (reportType.value) {
    state.tabList.map(item => {
      if (item.unit === reportType.value) {
        state.tabActiveItem = item
      }
    })
  } else {
    state.tabActiveItem = {
      name: "日",
      value: 0,
      unit: "day",
      intervalUnit: "days",
      diffTxt: "上一次"
    }
  }
  handleTimeTab(state.tabActiveItem)
}

onShow(() => {
  state.userInfo = uni.getStorageSync("userInfo")
    ? JSON.parse(uni.getStorageSync("userInfo"))
    : null;
    state.startDate = state.endDate = proxy.$Moment().subtract(1,"days").format('YYYY-MM-DD')
    handlePageInit()
    // handleNextIcon()
    // getSportReport()
});
</script>

<style lang="scss" scoped>
.header-report{
  background: #F8FAFA;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  margin-bottom: 0;
  padding-bottom: 30rpx;
}
.report-box{
  background: #F8FAFA;
  padding-bottom: 30rpx;
  box-sizing: border-box;
  .report-con{
    padding: 34rpx;
    box-sizing: border-box;
    font-family: PingFangSC, PingFang SC;
    .con-txt{
      width: 100%;
      background: #FFFFFF;
      border-radius: 24rpx;
      padding: 24rpx;
      box-sizing: border-box;
      font-weight: 400;
      font-size: 24rpx;
      color: rgba(34,34,34,0.8);
      line-height: 36rpx;
    }
    .con-tab{
      width: 100%;
      height: 80rpx;
      background: #EEF1EF;
      border-radius: 24rpx;
      font-weight: 400;
      font-size: 32rpx;
      color: rgba(34,34,34,0.8);
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 24rpx auto 34rpx;
      view{
        width: 25%;
        text-align: center;
        line-height: 80rpx;
      }
      .tab-active{
        width: 25%;
        height: 80rpx;
        background: linear-gradient( 175deg, #F7FFF1 0%, #E8FBFF 100%);
        box-shadow: 0rpx 2rpx 8rpx 0rpx #D5D9D9;
        border-radius: 16rpx;
        font-weight: 600;
        color: #222222;
      }
      .tab-disabled{
        color: rgba(34,34,34,0.2);
      }
    }
    .time-box{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 40rpx;
      margin-bottom: 24rpx;
      .time-arrow{
        width: 80rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
      }
      .time-arrow-left{
        justify-content: flex-start;
      }
      .time-arrow-right{
        justify-content: flex-end;
      }
      image{
        width: 24rpx;
        height: 24rpx;
      }
      .time{
        width: 488rpx;
        height: 60rpx;
        background: #EFFAF0;
        border-radius: 30rpx;
        font-size: 28rpx;
        color: rgba(34,34,34,0.86);
        box-sizing: border-box;
        line-height: 60rpx;
        text-align: center;
      }
    }
    .report-item{
      border-radius: 24rpx;
      padding: 26rpx 32rpx;
      background: #fff;
      position: relative;
      .item-bg{
        width: 100%;
        height: 396rpx;
        background: url('https://model-capability.oss-cn-beijing.aliyuncs.com/pro/healthRun/report-bg.png') 0 0 no-repeat;
        background-size: cover;
        position: absolute;
        left: 0;
        top: 0;
        .xingxing-img{
          width: 92rpx;
          height: 92rpx;
          position: absolute;
          top: 10rpx;
          right: 28rpx;
        }
      }
      .title{
        display: inline-block;
        font-family: system-ui;
        font-weight: 800;
        font-size: 36rpx;
        color: rgba(34,34,34,0.86);
        position: relative;
        .yuansu-img{
          width: 76rpx;
          height: 76rpx;
          position: absolute;
          top: -10rpx;
          right: -40rpx;
        }
      }
      .dial-plate{
        width: 456rpx;
        height: 252rpx;
        background: url('https://model-capability.oss-cn-beijing.aliyuncs.com/pro/healthRun/mabiao.png') 0 0 no-repeat;
        background-size: 100% 100%;
				position: relative;
				margin: 10rpx auto 76rpx;
				.circle-box{
					width: 148rpx;
					height: 148rpx;
					position: absolute;
					left: 50%;
					bottom: -50rpx;
					transform: translateX(-50%);
				}
        .circle{
          width: 148rpx;
					height: 148rpx;
					box-shadow: 0rpx 1rpx 6rpx 0rpx #D5D9D9;
					font-size: 28rpx;
					color: rgba(34,34,34,0.86);
					text-align: center;
					border-radius: 100%;
					background: linear-gradient( 151deg, #F1FFF8 0%, #A0DBFF 100%);		
					position: absolute;
					left: 0;
					top: 0;
					z-index: 2;
        }
				.icon-zhizhen{
					width: 52rpx;
					height: 135rpx;
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translate(-50%, -50%) rotate(2deg);
					transform-origin: center bottom;
				}
				.circle-1{
					background: linear-gradient( 151deg, #F1FFF8 0%, #A0DBFF 100%);					
				}
				.circle-2{
					background: linear-gradient( 151deg, #F7FFF1 0%, #AEFFDA 100%);			
				}
				.circle-3{
					background: linear-gradient( 151deg, #FFFDF1 0%, #FFC970 100%);				
				}
				.circle-4{
					background: linear-gradient( 151deg, #FEF0E5 0%, #FF6944 100%);				
				}
				.circle-num{
					font-weight: 900;
					font-size: 36rpx;
					color: rgba(34,34,34,0.86);
					margin-top: 30rpx;
				}
      }
      .dial-num{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 30rpx 40rpx;
        .line{
          width: 4rpx;
          height: 36rpx;
          background: #E5ECE9;
          border-radius: 2rpx;
        }
        .item-num{
          font-size: 28rpx;
          color: rgba(34,34,34,0.86);
          .item-standard{
            font-weight: 500;
            position: relative;
          }
          .item-pointer{
            width: 12rpx;
            height: 12rpx;
            background: linear-gradient( 205deg, #9EF9DC 0%, #6AB4FF 100%);
            position: absolute;
            border-radius: 100%;
            left: -20rpx;
            top: 50%;
            transform: translateY(-50%);
          }
          .item-pointer-2{
            background: linear-gradient( 232deg, #BBF99E 0%, #5CFFC9 100%);
          }
          .item-pointer-3{
            background: linear-gradient( 301deg, #FF9816 0%, #FFE873 100%);
          }
          .item-pointer-4{
            background: linear-gradient( 180deg, #FF9A3E 0%, #FF460A 100%);
          }
        }
      }
      .echarts-box{
        width: 100%;
        height: 568rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 4rpx 16rpx -8rpx rgba(0,0,0,0.3);
        border-radius: 24rpx;
        margin-top: 22rpx;
        padding: 52rpx 38rpx 0 38rpx;
        position: relative;
        box-sizing: border-box;
      }
      .history-box{
        width: 100%;
        border-radius: 16rpx;
        background: #FAFFF4;
        position: relative;
        margin-top: 24rpx;
        .history-header{
          border-radius: 16rpx;
          background: linear-gradient( 180deg, #C9FFD3 0%, #FAFFF4 100%);
          padding: 8rpx 16rpx;
          position: relative;
        }
        .header-bg{
          width: 304rpx;
          height: 68rpx;
          background: url('https://model-capability.oss-cn-beijing.aliyuncs.com/pro/healthRun/contrast-bg.png') 0 0 no-repeat;
          background-size: cover;
        }
        .header-title{
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: rgba(34,34,34,0.86);
          position: absolute;
          top: 26rpx;
          left: 24rpx;
          display: flex;
          align-items: center;
          text:first-child{
            font-weight: 600;
            font-size: 36rpx;
            color: #2C402E;
          }
        }
        .dashed-line{
          width: 576rpx;
          border-bottom: 2rpx dashed #BAE6C0;
          padding-top: 26rpx;
          margin: 0 auto;
        }
        .data-con{
          border-radius: 16rpx;
          .data-item{
            padding: 24rpx;
            border-bottom: 2rpx solid #E9ECE5;
            display: flex;
            justify-content: space-between;
            align-items: center;
            text{
              display: block;
              width: 30%;
              text-align: center;
              &:first-child{
								width: 40%;
                text-align: left;
              }
            }
            &:last-child{
              border: none;
            }
          }
        }
      }
      .health-knowledge{
        padding: 24rpx;
        background: linear-gradient( 180deg, #C9FFD3 0%, #E5FFF2 100%);
        border-radius: 16rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: rgba(34,34,34,0.86);
        line-height: 40rpx;
        margin-top: 22rpx;
        .knowledge-title{
          font-weight: 600;
          font-size: 28rpx;
          color: #2C402E;
          margin-left: -20rpx;
        }
      }
    }
    .item-sports{
      margin-top: 32rpx;
    }
    .health-advise{
      background: linear-gradient( 180deg, #DCFFE2 0%, #FAFFF4 100%);
      border-radius: 16rpx;
      padding: 32rpx 24rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: rgba(34,34,34,0.86);
      line-height: 48rpx;
      margin-top: 22rpx;
      position: relative;
      .advise-tip{
        font-weight: 600;
      }
    }
  }
  .bottom-tip{
    font-size: 24rpx;
    color: #C0C0C0;
    text-align: center;
    padding: 24rpx 0 0 30rpx;
  }
}
</style>
